<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<!-- 搜索栏 -->
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容" v-model="queryGoodsList.query" clearable @clear="clearQuery">
						<el-button slot="append" icon="el-icon-search" @click="queryInfo"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="goAddpage">添加商品</el-button>
				</el-col>
			</el-row>
			<el-table :data="goodsList" style="width: 100%" stripe border>
				<el-table-column type="index" label="#">
				</el-table-column>
				<el-table-column prop="goods_name" label="商品名称" width="660">
				</el-table-column>
				<el-table-column prop="goods_price" label="商品价格(元)" width="110">
				</el-table-column>
				<el-table-column prop="goods_weight" label="商品重量" width="80">
				</el-table-column>
				<el-table-column prop="add_time" label="创建时间" width="180">
					<template slot-scope="scope">
						{{scope.row.add_time | dateFormat}}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit"></el-button>
						<el-button type="danger" icon="el-icon-delete" @click="deleteList(scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
			background
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="queryGoodsList.pagenum"
			      :page-sizes="[5, 10, 15, 20]"
			      :page-size="10"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//搜索栏数据绑定
				input3: '',
				goodsList: [],
				queryGoodsList: {
					query: '',
					pagenum: 1,
					pagesize: 10
				},
				total:0
			}
		},
		created() {
			this.getGoodsList()
		},
		methods: {
			//跳转到添加商品页面
			goAddpage(){
				this.$router.push('/goods/add')
			},
			//删除
			 deleteList(row){
				 this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
				           confirmButtonText: '确定',
				           cancelButtonText: '取消',
				           type: 'warning'
				         }).then(async () => {
									 const {data:res} = await this.$http.delete(`goods/${row.goods_id}`)
									 if(res.meta.status!==200)return this.$message.error(res.meta.msg)
									 this.getGoodsList()
				           this.$message({
				             type: 'success',
				             message: '删除成功!'
				           });
				         }).catch(() => {
				           this.$message({
				             type: 'info',
				             message: '已取消删除'
				           });          
				         });
			},
			// 查询
			queryInfo(){
				this.getGoodsList()
				this.$message.success('搜索成功!')
			},
			clearQuery(){
				this.getGoodsList()
			},
			handleSizeChange(size){
				this.queryGoodsList.pagesize = size
				this.getGoodsList()
			},
			handleCurrentChange(num){
				this.queryGoodsList.pagenum = num
				this.getGoodsList()
			},
			async getGoodsList() {
				const {
					data: res
				} = await this.$http.get('goods', {
					params: this.queryGoodsList
				})
				if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
				this.goodsList = res.data.goods
				this.total = res.data.total
			}
		},
		filters: {
			time(timestamp) {
				var date = new Date(parseInt(timestamp) * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return Y + M + D + h + m + s;
			}
		}
	}
</script>

<style scoped="scoped">
	.el-table{
		min-width: 1228px;
	}
</style>
